<template>
  <div>
    <el-button @click="show2 = !show2">Click Me</el-button>
    <el-row>
      <transition-group name="el-zoom-in-center">
        <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0" v-show="show2">
          <el-card :body-style="{ padding: '0px' }">
            <img src="https://element.eleme.cn/2.0/static/hamburger.50e4091.png" class="image">
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button" @click="toggle">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </transition-group>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {
      currentDate: new Date(),
      show2: true
    }
  },
  methods: {
    toggle (e) {
      console.log(e.target)
    }
  }
}
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
